<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>分类</title>
		<meta name="description" content=""/>
		<meta name="keywords" content=""/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="shortcut icon" href="img/bitbug_favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/fenlei.css"/>
		<link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_732405_omtyk3izza9.css"/>
		<link rel="stylesheet" type="text/css" href="css/swiper-4.3.3.min.css"/>
	</head>
	<body>
		<div class="mobile">
			<!--头部-->
			<header class="clear_fix">
				<div class="btn">
					<p>Back</p>
				</div>
				<div class="sel">
					<select name="city">
						<option value="广州市">广州市</option>
						<option value="深圳市">深圳市</option>
					</select>
				</div>
				<div class="fenl">
					<h4>分类</h4>
				</div>
			</header>
			<!--主体内容-->
			<section class="clear_fix">
				<!--轮播图-->
				 <div class="swiper-container">
			    <div class="swiper-wrapper">
			      <div class="swiper-slide"><img src="img/lunbo1.png"/></div>
			      <div class="swiper-slide"><img src="img/lunbo2.png"/></div>
			      <div class="swiper-slide"><img src="img/lunbo3.png"/></div>
			      <div class="swiper-slide"><img src="img/lunbo4.png"/></div>
			    </div>
			    <!-- Add Pagination -->
			    <div class="swiper-pagination"></div>
			  </div>
				
			
  
				<!--美食类-->
				<div class="clear_fix">
					<div class="logo1">
						<img src="img/fenlei3.png"/>
					</div>
					<div class="tuan">
						<p>美食类</p>
					</div>
					<div class="logo2">
						<img src="img/tuangou5.png"/>
					</div>
					<div class="geng">
						<a href="index.html"><p>更多</p></a>
					</div>
				</div>
				<div class="fantuan">
					<div class="fantuan1"><img src="img/fenlei4_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei5_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei6_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei7_03.png"/></div>
				</div>
				
				<!--运动类-->
				<div class="clear_fix">
					<div class="logo3">
						<img src="img/fenlei8.png"/>
					</div>
					<div class="tuan">
						<p>运动类</p>
					</div>
					<div class="logo2">
						<img src="img/tuangou5.png"/>
					</div>
					<div class="geng">
						<a href="index.html"><p>更多</p></a>
					</div>
				</div>
				<div class="fantuan">
					<div class="fantuan1"><img src="img/fenlei10_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei11_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei12_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei13_03.png"/></div>
				</div>
				
				<!--电影类-->
				<div class="clear_fix">
					<div class="logo5">
						<img src="img/fenlei9.png"/>
					</div>
					<div class="tuan">
						<p>电影类</p>
					</div>
					<div class="logo2">
						<img src="img/tuangou5.png"/>
					</div>
					<div class="geng">
						<a href="index.html"><p>更多</p></a>
					</div>
				</div>
				<div class="fantuan">
					<div class="fantuan1"><img src="img/fenlei14_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei15_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei15_03.png"/></div>
					<div class="fantuan1"><img src="img/fenlei14_03.png"/></div>
				</div>
				
			</section>
		<!--尾部-->
			<footer class="clear_fix">
				<ul class="clear_fix">
					<li>
						<a href="index.html" class="iconfont icon-shouye"></a>
						<a href="index.html">首页</a>
					</li>
					<li>
						<a href="fenlei.html" class="iconfont icon-leimupinleifenleileibie2"></a>
						<a href="fenlei.html">分类</a>
					</li>
					<li>
						<a href="faxian.html" class="iconfont icon-faxian"></a>
						<a href="faxian.html">发现</a>
					</li>
					<li>
						<a href="wode.html" class="iconfont icon-wode"></a>
						<a href="wode.html">我的</a>
					</li>
				</ul>
			</footer>
		</div>
		
		
			<!--script 引入轮播图-->
			<script src="js/swiper-4.3.3.min.js"></script>
		
		
	  <!-- Initialize Swiper -->
			  <script>
			    var mySwiper = new Swiper('.swiper-container', {
			    	autoplay:true,
			    	loop:true,
			    	slidesPerView: 4,
      				spaceBetween: 30,
				    pagination: {
				       el: '.swiper-pagination',
				    },
			    });
			    
		    //鼠标滑过pagination控制swiper切换
				for(i=0;i<mySwiper.pagination.bullets.length;i++){
				  mySwiper.pagination.bullets[i].index=i
				  mySwiper.pagination.bullets[i].onmouseover=function(){
				    mySwiper.slideTo(this.index);
				  };
} 
			  </script>
	</body>
</html>
